import { Button, Checkbox, DatePicker, Form, Input, Select } from 'antd'
import React from 'react'

function SearchForm({ ss, cz }) {
    const { RangePicker } = DatePicker;
    return (
        <div>
            <Form style={{ display: 'flex', justifyContent: 'space-between' }}
                onFinish={(value) => {
                    if (value.rangepicker) {
                        value.rangepicker = [
                            value.rangepicker[0].format('YYYY-MM-DD'),
                            value.rangepicker[1].format('YYYY-MM-DD')
                        ]
                    } else {
                        value.rangepicker = []
                    }
                    ss(value)
                }}
                onReset={cz}>
                <Form.Item label='姓名' name='name'>
                    <Input />
                </Form.Item>
                <Form.Item label='职业' name='job'>
                    <Select style={{ width: 200 }}>
                        <Select.Option value='总经理'>总经理</Select.Option>
                        <Select.Option value='销售助理'>销售助理</Select.Option>
                        <Select.Option value='销售员'>销售员</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item name="status" valuePropName="checked">
                    <Checkbox>开/关</Checkbox>
                </Form.Item>
                <Form.Item name="rangepicker" label="时间" >
                    <RangePicker />
                </Form.Item>
                <Form.Item>
                    <Button htmlType='submit'>搜索</Button>
                    <Button htmlType='reset'>重置</Button>
                </Form.Item>
            </Form>
        </div >
    )
}

export default React.memo(SearchForm)
